/*
 * @Author: your name
 * @Date: 2021-03-18 11:22:30
 * @LastEditTime: 2021-03-19 08:35:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings E
 * @FilePath: \html特效d:\vue-foundation\Jquery和webpack\webpack.config.js
 */
const path = require('path');//处理路径
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
 entry: './src/index.js',
 output: {
  path: path.resolve(__dirname, 'packageDone'),
  filename: 'HAHA.js',
},
//要引入插件
  plugins:[new  HtmlWebpackPlugin({
    template:'./src/index.html'
  }),new MiniCssExtractPlugin(),new VueLoaderPlugin()],//自动生成html文件
  //加载css文件
  module: {//加载器配置
    rules: [
      {
      test: /\.css$/i,
      use: ["style-loader", "css-loader"],
    },
    {
      test: /\.less$/i,
      use: [ "style-loader", "css-loader", 'less-loader'], // 将 Less 文件编译为 CSS 文件
    },
    {
                      test: /\.css$/i,
                      use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    {
      test: /\.(png|jpg|gif|jpeg)$/i,
      use: [
        {
          loader: 'url-loader',// 匹配文件, 尝试转base64字符串打包到js中
          // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
          options: {
            limit: 8 * 1024,
          },
        },
      ],
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      use: [
        {
          loader: 'url-loader',// 匹配文件, 尝试转base64字符串打包到js中
          // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
          options: {
            limit: 2 * 1024,
            // 配置输出的文件名
            name: '[name].[ext]',
            // 配置输出的文件目录
            outputPath: "fonts/"
          },
        },
      ],
    },
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
          }
      },
      
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },
    // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
  ],
  },
  devServer: {
    port: 8080, // 端口号
    open: true // 自动打开浏览器
  }
}